<script setup>
import { onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import { getApiToken, successCallback } from '@/api/ppt'

const message = useMessage()

// 假设SDK文件在public目录下
const sdkScriptUrl = '/docmee-ui-sdk-iframe.min.js'
let token = ''

async function getToken() {
  const res = await getApiToken()
  if (res.code == 200) {
    token = res.data.apiKey
    initPPT()
  }
  else {
    message.error('获取API Token失败')
  }
}

onMounted(() => {
  getToken()
})

function initPPT() {
  // 动态加载SDK脚本
  const script = document.createElement('script')
  script.src = sdkScriptUrl
  script.onload = () => {
    // 假设SDK提供了一个全局对象或方法来初始化
    if (window.DocmeeUI) {
      // 初始化 UI iframe
      const docmeeUI = new window.DocmeeUI({
        pptId: null,
        token, // token
        container: document.querySelector('#ppt-container'), // 挂载 iframe 的容器
        page: 'creator', // 'creator' 创建页面; 'dashboard' PPT列表; 'customTemplate' 自定义模版; 'editor' 编辑页（需要传pptId字段）
        lang: 'zh', // 国际化
        mode: 'light', // light 亮色模式, dark 暗色模式
        isMobile: false, // 移动端模式
        background: 'linear-gradient(-157deg,#f57bb0, #867dea)', // 自定义背景
        padding: '40px 20px 0px',
        async onMessage(message) {
          console.log('监听事件', message)
          if (message.type === 'invalid-token') {
            console.log('token 认证错误')
            // 更换新的 token
            // let newToken = createApiToken()
            // docmeeUI.updateToken(newToken)
          }
          else if (message.type === 'beforeGenerate') {
            const { subtype, fields } = message.data
            if (subtype === 'outline') {
              console.log('即将生成ppt大纲', fields)
              return true
            }
            else if (subtype === 'ppt') {
              console.log('即将生成ppt', fields)
              const res = await successCallback()
              if (res.code == 200) {
                docmeeUI.sendMessage({
                  type: 'success',
                  content: '继续生成PPT',
                })
                return true
              }
              else {
                message.error('生成PPT失败')
                return false
              }
            }
          }
          else if (message.type === 'beforeCreateCustomTemplate') {
            const { file, totalPptCount } = message.data
            console.log('用户自定义完整模版，PPT文件：', file.name)
            if (totalPptCount < 2) {
              console.log('用户积分不足，不允许制作自定义完整模版')
              return false
            }
            return true
          }
          else if (message.type == 'pageChange') {
            pageChange(message.data.page)
          }
          else if (message.type === 'beforeDownload') {
            const { id, subject } = message.data
            return `PPT_${subject}.pptx`
          }
          else if (message.type == 'error') {
            if (message.data.code == 88)
              alert('您的次数已用完')
						 else
              alert(`发生错误：${message.data.message}`)
          }
        },
      })
    }
    else {
      console.error('DocmeeUI SDK未加载')
    }
  }
  document.body.appendChild(script)
}
</script>

<template>
  <div id="ppt-container">
    <!-- 这里可以是SDK初始化后生成的内容 -->
  </div>
</template>

<style scoped lang="less">
#ppt-container {
	width: 100%;
	height: calc(100% - 20px);
	overflow: hidden;
}
</style>
